<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    <style>
        body {
            height: 100%;
            background-color: #39393b;
        }
    </style>
</head>
<body>
<!--
*************************************************************************
   Generated by HCODE at 2017-07-04 15:09:27
   From: https://code.hcharts.cn/demos/hhhhD1?hc-theme=dark-unica
*************************************************************************
 -->
<div style="margin-top: 15%">
    <div id="container" style="min-width:400px;height:400px"></div>
</div>
<script>
    $(function () {
        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
        setInterval(function () {
            //定时器要执行的代码
            func()
        }, 30000);
        function func() {
            var data = '';
            $.ajax({
                url: "", context: document.body, async: false, success: function (getdata) {
                    data = getdata;
                }
            });
{#            console.log(data);#}


            // 构建图表
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '网站各浏览器的访问量占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            connectorColor: 'silver'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    {#                    data: [#}
                    {#                        ['Firefox', 45.0],#}
                    {#                        ['IE', 26.8],#}
                    {#                        {#}
                    {#                            name: 'Chrome',#}
                    {#                            y: 12.8,#}
                    {#                            sliced: true,#}
                    {#                            selected: true#}
                    {#                        },#}
                    {#                        ['Safari', 8.5],#}
                    {#                        ['Opera', 6.2],#}
                    {#                        ['其他', 0.7]#}
                    {#                    ]#}
                    data: data
                }]
            });
        }

        func()
    });
</script>
</body>
</html>